 <template>
  <div class="course-portrait">
    <div class="title">已售课程科目排名</div>
    <div class="seamless-warp">
      <div class="tr-th">
        <div>序号</div>
        <div>学科</div>
        <div>课程类别</div>
        <div>订单ID</div>
      </div>
        <div class="warp-table">
          <table cellspacing="0" cellpadding="0" class="tab">
            <tr v-for="(item, index) in arr" :key="index">
              <td class="tab_title">
                <div v-if="item.number">{{ item.number }}</div>
              </td>
              <td class="tab_title">{{ item.subject }}</td>
              <td class="tab_title">{{ item.type }}</td>
              <td class="tab_title">{{ item.id }}</td>
            </tr>
          </table>
        </div>
    </div>

  </div>
</template>
<script>
export default {
  // 父组件传来的排名表的信息
  props:['arr']
}
</script>
   
 
<style lang="less" scoped>
.course-portrait {
  width: 100%;
  height: 310px;
  background-color: #ffffff;

  .title {
    height: 40px;
    line-height: 40px;
    padding-left: 8px;
    padding-right: 30px;
    color: rgb(85, 85, 85);
    text-align: left;
    font-size: 14px;
  }

  .seamless-warp {
    height: 260px;
    margin: 5px 10px 5px 10px;

    .tr-th {
      width: 100%;
      background-color: #fafafa;
      color: #505050;
      font-size: 17px;
      display: flex;
      font-weight: bolder;
      height: 36px;

      div {
        flex: 1;
        height: 36px;
        line-height: 36px;
        text-align: center;
      }

      div:first-child {
        text-align: left;
        padding-left: 20px;
      }

      div:last-child {
        text-align: right;
        padding-right: 10px;
      }
    }

    .warp-table {
      height: 224px;
      overflow: hidden;

      .tab {
        width: 100%;
        // transform: translateY(-224px);
        animation: move 10s ease-in infinite; 
        tr {
          font-size: 13px;
          color: #455456;
          display: flex;
          height: 28px;

          td {
            flex: 1;
            text-align: center;
            height: 27px;
            line-height: 27px;

            div {
              margin-top: 2px;
              background: #c38c55;
              width: 23px;
              height: 23px;
              text-align: center;
              line-height: 23px;
              border-radius: 50%;
              color: #ffffff;
            }
          }

          td:first-child {
            padding-left: 25px;
          }

          td:last-child {
            text-align: right;
            padding-right: 10px;
          }
        }

        tr:nth-child(2n) {
          background: #ffffff
        }

        tr:nth-child(2n+1) {
          background: #f7f7f9
        }

        tr:nth-child(-n+3) {
          div {
            background: #5bb3a8;
          }
        }
      }
      @keyframes move {
        0%{
          transform:translateY(0px)
        }
        48%{
          transform:translateY(0px)
        }
        52%{
          transform: translateY(-224px);
        }
        100%{
          transform: translateY(-224px);
        }
      }
    }
  }

}
</style>